<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
    }

    .root {
      width: 800px;
      margin: auto;
    }

    .img-zoom-container {
      position: relative;
    }

    .img-zoom-lens {
      position: absolute;
      border: 1px solid #d4d4d4;
      /*set the size of the lens:*/
      width: 50px;
      height: 50px;
    }

    .img-zoom-result {
      border: 1px solid red;
      /*set the size of the result div:*/
      width: 300px;
      height: 300px;
    }
  </style>
</head>

<body>


  
  <div class="root">


    <h1>  magnifier 放大镜 : 鼠标放上去 ,  图片放大效果 </h1>
    <h1>兼容 ie , 并适配手机端 </h1>


        <div class="img-zoom-container">
          <!-- 原始图片 -->
          <img id="original_img" src="img/Tesla (15).jpeg" width="300" height="240">
          <!-- 放大后的图片      宽 300px   /  高 300px   -->
          <div id="zoomed_img" class="img-zoom-result"></div>
        </div>
    

  </div>



  <h1>  复杂 , 难懂 ...  </h1>


</body>
<script>


  function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;

    img = document.getElementById(imgID);           //  -->    原始图片 
    result = document.getElementById(resultID);     //  -->    放大后的图片 

    /*create lens:*/
    lens = document.createElement("DIV");
    lens.setAttribute("class", "img-zoom-lens");   // 鼠标上的那个方形小框框
    /*
    .img-zoom-lens {
      position: absolute;
      border: 1px solid #d4d4d4;
      width: 50px;
      height: 50px;
    }*/

    /*insert lens:*/
    img.parentElement.insertBefore(lens, img);

    /*calculate the ratio between result DIV and lens:*/
    cx = result.offsetWidth / lens.offsetWidth;
    cy = result.offsetHeight / lens.offsetHeight;
    console.log(" 300/50=6,    cx  :  " + cx + "  cy :  " + cy);

    /*set background properties for the result DIV:*/
    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";

    /*execute a function when someone moves the cursor over the image, or the lens:*/
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);

    /*and also for touch screens:*/
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);

    // 移动
    function moveLens(e) {
      var pos, x, y;
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      
      /*get the cursor's x and y positions:*/
      pos = getCursorPos(e);

      /*calculate the position of the lens:*/
      x = pos.x - (lens.offsetWidth / 2);
      y = pos.y - (lens.offsetHeight / 2);
      /*prevent the lens from being positioned outside the image:*/
      if (x > img.width - lens.offsetWidth) { x = img.width - lens.offsetWidth; }
      if (x < 0) { x = 0; }
      if (y > img.height - lens.offsetHeight) { y = img.height - lens.offsetHeight; }
      if (y < 0) { y = 0; }
      /*set the position of the lens:*/
      lens.style.left = x + "px";
      lens.style.top = y + "px";
      /*display what the lens "sees":*/
      result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
    }

    function getCursorPos(e) {
      var a, x = 0, y = 0;
      e = e || window.event;
      
      //  get the x and y positions of the image:
      //  getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，
      //  包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离
      a = img.getBoundingClientRect();
      
      /*calculate the cursor's x and y coordinates, relative to the image:*/
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return { x: x, y: y };
    }
  }

  // 参数:    原始图片 id,  放大后图片 id  
  imageZoom("original_img", "zoomed_img");




</script>
</html>